<template>
    <div>
        <!-- <Row>
        <Col span="24" style="text-align:left;">
        <span>坐席接听状态:</span>
            <Select  style="width:150px;margin:0 20px 0 6px;" v-model="comingCallStatus">
                <Option v-for="item in comingCallStatusData" :value="item" :key="item">{{item}}</Option>
            </Select>
        <span>通话标识：</span>    
        <Select  style="width:150px;margin:0 5px 0 6px;" v-model="callIdentStatus">
                <Option v-for="item in callIdentStatusData" :value="item" :key="item">{{item}}</Option>
        </Select>
        <Input  placeholder="请输入..." style="width: 180px"></Input>
        </Col>
       </Row>
       <br> -->
       <Row>
        <Col span="24" style="text-align:left;">
        <RadioGroup v-model="dateBtn" type="button" style="margin-right:20px;" @on-change="selectData">
            <Radio label="today">今天</Radio>
            <Radio label="yestoday">昨天</Radio>
            <Radio label="oneweak">一周</Radio>
            <Radio label="onemonth">一月</Radio>
        </RadioGroup>
        <DatePicker v-model="allDate"  @on-change="seleDate"  format="yyyy-MM-dd HH:mm:ss" type="daterange" placement="bottom-end" placeholder="请选择开始日期至结束日期" style="width: 300px;margin-right:10px;" ></DatePicker>
            <Button type="primary" class="searchBtnColor" @click="getComingRecord" >搜索</Button>
        </Col>
       </Row>
        <br>
        <Table :loading="Tableloading" highlight-row size="small" :columns="columns1" :data="data1"></Table>
        <br>
       <Page  :total="count" placement="top" :page-size-opts="opts" size="small" :page-size="size" show-total show-elevator show-sizer   @on-change="changePage" @on-page-size-change="changeSize"></Page>
        <audio id="comingaudio">
            HTML5 audio not supported
        </audio>
    </div>
</template>

<script>
    import record from "service/record.js";
    import callService from 'service/callService.js'
    import {
        mapGetters
    } from "vuex";
    export default {
        name: "comingCall",
        data() {
            return {
                page: 0,
                size: 10,
                count: 0,
                opts: [10, 15],
                comingCallStatusData: ["全部", "客户接听", "客户未接听"],
                callIdentStatusData: ["客户号码", "坐席姓名", "坐席工号", "坐席电话", "队列号", "学生ID"],
                comingCallStatus: "全部",
                callIdentStatus: "客户号码",
                dateBtn: "today",
                startTime: "",
                endTime: "",
                allDate: "",
                Tableloading: true,
                columns1: [{
                    title: "客户电话",
                    key: "phoneNumber"
                }, {
                    title: "学生ID",
                    key: "customerID"
                }, {
                    title: "IVR",
                    key: "customerID"
                }, {
                    title: "队列号",
                    key: "customerID"
                }, {
                    title: "队列名",
                    key: "customerID"
                }, {
                    title: "坐席工号",
                    key: "agentID"
                }, {
                    title: "坐席姓名",
                    key: "agentName"
                }, {
                    title: "坐席电话",
                    key: "extNumber"
                }, {
                    title: "开始时间",
                    key: "answerTime"
                }, {
                    title: "接听状态",
                    key: "connID"
                }, {
                    title: "客户挂机",
                    key: "endTime"
                }, {
                    title: "总时长(s)",
                    key: "totalTime"
                }, {
                    title: "录音",
                    key: "answerTime",
                    render: (h, params) => {

                        return h('Button', {
                            props: {
                                size: 'small'
                            }
                        }, [
                            h('span', {
                                style: {
                                    marginRight: '5px'

                                },
                                on: {
                                    click: async(event) => {

                                        let targetDom = event.target
                                            // let index = params.index

                                        // let targetDomParent = document.getElementById('callHistoryContainer').getElementsByTagName('tr')[index]
                                        // console.log(targetDomParent)
                                        // let targetDomParentSiblings = domAction.siblingsDom(targetDomParent)
                                        // console.log(targetDomParentSiblings)
                                        // document.getElementById('callHistoryContainer').getElementsByTagName('tr')[index].siblingsDom.getElementsByTagName('')

                                        let data = {
                                            'callUUID': params.row.callUUID,
                                            'extNumber': params.row.extNumber
                                        }

                                        let jsondata = await this.getCallVoiceUrl(data)
                                        if (jsondata.recordingUrl) {
                                            let recordingUrl = jsondata.recordingUrl

                                            let oAudio = document.querySelector('#comingaudio')
                                            if (targetDom.innerText == '播放录音') {
                                                targetDom.innerText = '暂停录音'
                                                oAudio.src = recordingUrl
                                                oAudio.play()
                                            } else {
                                                targetDom.innerText = '播放录音'
                                                oAudio.pause();
                                            }
                                        } else {
                                            this.$Message.warning('没有录音');
                                            return false
                                        }
                                    }
                                }
                            }, '播放录音')
                        ]);
                    }
                }],
                data1: []
            };
        },
        computed: {
            ...mapGetters({
                loginUserInfo: "loginUserInfo"
            })
        },
        methods: {
            selectData(){
                this.Tableloading = true;
                if (this.dateBtn === "today") {
                    this.allDate = "";
                    this.getNeedData(0);
                } else if (this.dateBtn === "yestoday") {
                    this.allDate = "";
                    this.getNeedData(-1);
                } else if (this.dateBtn === "oneweak") {
                    this.allDate = "";
                    this.getNeedData(-7);
                } else if (this.dateBtn === "onemonth") {
                    this.allDate = "";
                    this.getNeedData(-30);
                }
                this.getComingRecord()
            },
            async getComingRecord() {
                if (!this.loginUserInfo.userId) {
                    return false;
                }
                let vm = this;
                if (vm.startTime && vm.endTime) {} else {
                    vm.getNeedData(0);
                }
                let data = {
                    userId: this.loginUserInfo.userId,
                    page: vm.page,
                    count: vm.size,
                    startTime: vm.startTime,
                    endTime: vm.endTime
                };
                let comingRecord = await record.comingRecord(data);
                vm.Tableloading = false;
                vm.count = comingRecord.totalElements;
                vm.data1 = comingRecord.content;
            },
            changePage(response) {
                var _that = this;
                _that.page = response - 1;
                _that.getComingRecord();
            },
            changeSize(response) {
                var _that = this;
                _that.size = response;
                _that.getComingRecord();
            },
            getTodayDate(AddDayCount) {
                var date = new Date();
                date.setDate(date.getDate() + parseInt(AddDayCount));
                var seperator1 = "-";
                var seperator2 = ":";
                var month = date.getMonth() + 1;
                var strDate = date.getDate();
                if (month >= 1 && month <= 9) {
                    month = "0" + month;
                }
                if (strDate >= 0 && strDate <= 9) {
                    strDate = "0" + strDate;
                }
                var currentdate =
                    date.getFullYear() + seperator1 + month + seperator1 + strDate;
                return currentdate;
            },
            getNeedData(type) {
                let ic_start = " 00:00:00";
                let ic_end = " 23:59:59";
                this.startTime = this.getTodayDate(type) + ic_start;
                if(this.dateBtn==="yestoday"){
                    this.endTime = this.getTodayDate(type) + ic_end;
                }else{
                    this.endTime = this.getTodayDate(0) + ic_end;
                }
            },
            seleDate(ret) {
                if (this.allDate) {
                    this.dateBtn = "";
                    this.startTime = ret[0];
                    this.endTime = ret[1];
                } else {
                    this.dateBtn = "today";
                }
            },
            async getCallVoiceUrl(data) {
                let jsondata = await callService.getRecordVoiceUrlByCallIDAndExtNum(data)
                return jsondata
            },
        },
        watch: {
            dateBtn(newVal, oldVal) {
                if (newVal === "today") {
                    this.allDate = "";
                    this.getNeedData(0);
                } else if (newVal === "yestoday") {
                    this.allDate = "";
                    this.getNeedData(-1);
                } else if (newVal === "oneweak") {
                    this.allDate = "";
                    this.getNeedData(-7);
                } else if (newVal === "onemonth") {
                    this.allDate = "";
                    this.getNeedData(-30);
                }
            },
            loginUserInfo(newVal, oldVal) {
                this.getComingRecord()
            }
        },
        mounted() {
            this.getNeedData(0);
            this.getComingRecord();
        }
    };
</script>